<template>
  <div class="list">
    <div class="msglist" v-if="type != 'user'">
      <div class="nouser" v-if="data.length === 0">
        <div class="alert">没有用户</div>
      </div>
      <vue-scroll class="scroll" :ops="scroll_ops" v-else>
        <userItem ref="user_item" :active="active" @click.native="clickUser({id: item.user_id, openid: item.openid, num: item.new_msg_num}, item)" :user="item" v-for="(item, index) in data" />
      </vue-scroll>
    </div>
    <div class="userlist" v-else>
      <vue-scroll class="scroll" :ops="scroll_ops">
        <Collapse class="collapse" value="2">
            <Panel name="1">
                已沟通
                <div slot="content">
                  <userItem :nomsg="true" ref="user_item" @click.native="clickUser({id: item.user_id, openid: item.openid, num: item.new_msg_num}, item)" v-if="item.subscribe && item.groupid == 1" :user="item" :index="index" v-for="(item, index) in data" :key="index"/>
                </div>
            </Panel>
            <Panel name="2">
                未沟通
                <div slot="content">
                  <userItem :nomsg="true"  ref="user_item" @click.native="clickUser({id: item.user_id, openid: item.openid, num: item.new_msg_num}, item)" v-if="item.subscribe && item.groupid == 0" :user="item" :index="index" v-for="(item, index) in data" :key="index"/>
                </div>
            </Panel>
            <Panel name="3">
                取消关注
                <div slot="content">
                  <userItem :nomsg="true"  ref="user_item" @click.native="clickUser({id: item.user_id, openid: item.openid, num: item.new_msg_num}, item)" v-if="item.subscribe == 0" :user="item" :index="index" v-for="(item, index) in data" :key="index"/>
                </div>
            </Panel>
        </Collapse>
      </vue-scroll>
    </div>
  </div>
</template>

<script>
  import userItem from '../userItem'
  export default {
    name: 'userList',
    data () {
      return {
        defaultpic: require('../../assets/images/timg.jpg'),
        scroll_ops: {
          vuescroll: {
            mode: 'native'
          },
          scrollPanel: {
            scrollingX: false
          },
          rail: {
            size: '2px',
            gutterOfSide: '0px'
          },
          bar: {
            background: '#0f85ff',
            opacity: 1
          }
        }
      }
    },
    props: {
      data: {
        default: {}
      },
      type: {
        default: ''
      },
      active: {
        default: 0
      }
    },
    components: {
      userItem
    },
    created () {
    },
    methods: {
      clickUser (userId, item) {
        item.new_msg_num = 0
        this.$listeners['msg-click'](userId)
        this.refreshData()
      },
      // 刷新数据
      refreshData () {
        this.$refs['user_item'].forEach((item) => {
          item.$forceUpdate()
        })
        this.$forceUpdate()
      }
    }
  }
</script>

<style lang="less">
  @import './style.less';
</style>
